import React from 'react';
import 'antd/dist/antd.css';
import Todo from './views/todo'
import ReduxTest from './views/redux'
import ReactReduxTest from './views/react-redux'
import ReactRouterTest from './views/test-router'
import ListDetail from './views/test-router/ListDetail'
import Redirect from './views/test-router/redirect'
import ReactHooks from './views/react-hooks'

import {BrowserRouter, Route, NavLink} from 'react-router-dom'

function App() {
	//模拟动态获取路由配置
	let routeConfig = [
		{to: '/', path: '/', exact: true, title: '1.首页待办事项示例', component: Todo},
		{to: '/reduxTest', path: '/reduxTest', exact: false, title: '2.Redux示例', component: ReduxTest},
		{to: '/reactReduxTest', path: '/reactReduxTest', exact: false, title: '3.ReactRedux示例', component: ReactReduxTest},
		{to: '/reactRouter', path: '/reactRouter', exact: false, title: '4.ReactRouter示例', component: ReactRouterTest},
		{to: '/reactHooks', path: '/reactHooks', exact: false, title: '5.ReactHooks示例', component: ReactHooks},
		
	]
  	return (
		<BrowserRouter>
			<div className="App">
				<header className="main-top">
					<h3>顶部公共区域</h3>
				</header>
				<div className="main">
					<div className="main-left">
						{/* <li><NavLink to="/" activeClassName="active">1.首页待办事项示例</NavLink></li>
						<li><NavLink to="/reduxTest" activeClassName="active">2.Redux示例</NavLink></li>
						<li><NavLink to="/reactReduxTest" activeClassName="active">3.ReactRedux示例</NavLink></li>
						<li><NavLink to="/reactRouter" activeClassName="active">4.ReactRouter示例</NavLink></li> */}
						{
							routeConfig.map((item,index) => {
								return (<li key={index}><NavLink to={item.to} activeClassName="active">{item.title}</NavLink></li>)
							})
						}
					</div>
					<div className="main-right">
						{/* <Route path="/" exact component={Todo}/>
						<Route path="/reduxTest" component={ReduxTest}/>
						<Route path="/reactReduxTest" component={ReactReduxTest}/>
						<Route path="/reactRouter" component={ReactRouterTest}/> */}
						{
							routeConfig.map((item,index) => {
								return (<Route key={index} exact={item.exact} path={item.path} component={item.component}/>)
							})
						}

						{/* 详情和重定向的页面 */}
						<Route path="/listDetail/:id" component={ListDetail}/>
						<Route path="/redirect/:id" component={Redirect}/>
					</div>
				</div>
			</div>
		</BrowserRouter>
  	);
}

export default App;
